<template>
    <div style="height: 81vh;">
        <div class="flex-container" style="margin-left: 10vw; margin-top: 10vh; width: 80vw; ">
            <span style="width: 5vw;" for="name" class="form-label">用户名:</span>
            <input style="width: 20vw;" v-model="name" type="text" class="form-control" aria-describedby="请输入书名">
            <el-button style="margin-left: 20vw;" type="success" @click="findone()">查找</el-button>
            <el-button style="margin-left: 20vw;" type="primary" @click="set()">切换</el-button>
        </div>


    <div v-if="(state%2) === 1"> 
        <div>
            <el-table
                :data="charts"
                stripe
                style=" margin-left: 10vw; margin-top: 2vh; width: 80vw">
                <el-table-column
                prop="id"
                label="序号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户"
                width="100">
                </el-table-column>
                <el-table-column
                prop="photo"
                label="头像"
                width="800">
                </el-table-column>
                <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                    size="mini"
                    @click="delet(scope.$index)">封禁</el-button>
                </template>
                
                </el-table-column>
            </el-table>
    
        </div>
       
    </div>
    <div v-else> 
        <div>
            <el-table
                :data="oncharts"
                stripe
                style=" margin-left: 10vw; margin-top: 2vh; width: 80vw">
                <el-table-column
                prop="id"
                label="序号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户"
                width="100">
                </el-table-column>
                <el-table-column
                prop="photo"
                label="头像"
                width="800">
                </el-table-column>
                <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                    size="mini"
                    @click="ok(scope.$index)">解封</el-button>
                </template>
                
                </el-table-column>
            </el-table>
    
        </div>
       
    </div>
<div style="height: 10vh;"></div>
    </div>
    
</template>

<script>
import $ from "jquery";
import { ref } from "vue";
import { useStore } from "vuex";
export default {
    setup(){

        let store = useStore();
        let charts = ref([]);
        let oncharts = ref([]);
        let name = ref('');
        let state = ref(1);
        const info =()=>{
            $.ajax({
                url:"http://localhost:3000/api/user/info/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                success(resp){
                    charts.value = resp;
                    
                }
                })
        }
        const infodie =()=>{
            $.ajax({
                url:"http://localhost:3000/api/user/infodie/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                success(resp){
                    oncharts.value = resp;          
                }
                })
        }
        info()
        infodie()
        const delet = (index)=>{
            $.ajax({
                url:"http://localhost:3000/api/user/deleuser/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },  
                data:{
                      id:charts.value[index].id
                    },
                success(resp){
                    info()
                    infodie()
                    console.log(resp)
                }
                })
        }
        const ok = (index)=>{
            $.ajax({
                url:"http://localhost:3000/api/user/okuser/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },  
                data:{
                      id:oncharts.value[index].id
                    },
                success(resp){
                    console.log(resp)
                    info()
                    infodie()
                }
                })
        }
    
        const findone = ()=>{
            $.ajax({
                url:"http://localhost:3000/api/user/findone/",
                type:"post",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },  
                data:{
                      username:name.value
                    },
                success(resp){
                    charts.value = resp;
                    console.log(resp)
                }
                })
        }
        const set =()=>{
            state.value = state.value + 1
        }

        
        
        return{
            charts,
            delet,
            name,
            findone,
            oncharts,
            set,
            state,
            ok,

    }

    }
}
</script>


<style scoped>
.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 元素之间的间距 */
}

</style>